<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">

        <transition-group tag="ul" appear @before-appear="beforeAppear">
          <li v-for="(item,index) in list" :key="item.id" :data-index="index">
            {{item.id}} -- {{item.name}} -- {{item.age}}
            <button @click="del(index)">删除</button>
          </li>
        </transition-group>
        <input type="text" v-model="id"/>
        <input type="text" v-model="name"/>
        <input type="text" v-model="age"/>
        <input type="button" value="添加人员" @click="add"/>

    </div>
  </body>
  <script src="vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        list: [{
          id: 1,
          name: '小王',
          age: 18
        }, {
          id: 2,
          name: '小刚',
          age: 19
        }, {
          id: 3,
          name: '小红',
          age: 20
        }, ],
        id:'',
        name:'',
        age:''
      },
      methods:{
        add() {
          var newstu={
            id:this.id,
            name:this.name,
            age:this.age
          };
          this.list.push(newstu)
          this.id=''
          this.name=''
          this.age=''
        },
        del(index){
          this.list.splice(index,1)
        },
        beforeAppear(el){
          console.log(el.dataset.index)
          el.style.transitionDelay=el.dataset.index

        },
        afterAppear(el){

        }
      }
    })
  </script>
  <style>
    .v-enter,
    .v-leave-to{
      opacity: 0;
      transform: translateY(100px);
    }
    .v-leave-active{
      position: absolute;
    }
    .v-enter-active,
    .v-leave-active{
      transition: all 1s ease;
    }

  </style>
</html>
